<template>
	<view class="my-venues">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
          color: '#2f75fa',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>
		<view class="list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id">
				<!-- <view class="share" @click="fenxiang()">
					<u-icon name="share-square" color="#fff" size="26"></u-icon>
				</view> -->
				<!-- <view class="share_s" @click="fenxiang()">
					分享
				</view> -->
				<!-- <button id="shareBtn"  open-type="share">分享</button> -->
				<view class="" v-if="currentTab !== 1">
					<view class="share_a" v-if="item.beShare == 0">
						<u-button id="shareBtn" plain='true' open-type="share"
							customStyle="border:none ;color :#2f75fa;" @click="fx_click(item)">分享</u-button>
					</view>
					<view class="share_m" v-if="item.beShare == 1">
						被分享
						<!-- <u-button id="shareBtn" customStyle="border:none">被分享</u-button> -->
					</view>
				</view>
				<!-- <view class="" v-if="currentTab !== 1">
					
					<view class="share_mc">
						{{ item.court_name}}
					</view>
				</view> -->
				<navigator v-if="currentTab !== 1"
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.share_user.phone}&product_id=${item.product_id}`">
					<view class="d-flex">
						<u-image width="124rpx" height="124rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>

						<view style="margin-left: 16rpx">
							<view class="name blod">{{ item.gdods.goods_name}}</view>
							<view class="venue">{{ item.field_name }}<text style="padding-left: 40rpx;">{{ item.court_name}}</text> </view>
							<view class="date">{{ item.date }}</view>
						</view>
					</view>
				</navigator>

				<view class="d-flex" v-if="currentTab !== 0">
					<u-image width="124rpx" height="124rpx" radius="10rpx" :src="item.goods.goods_image"></u-image>

					<view style="margin-left: 16rpx">
						<view class="name blod">{{ item.gdods.goods_name}}</view>
						<view class="venue">{{ item.field_name }}</view>
						<view class="date">{{ item.date }}</view>
					</view>
				</view>
				<navigator
					:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地&beShare=${item.beShare}&sender=${item.share_user.phone}&product_id=${item.product_id}&field_type=${item.field_type}`">
					<view class="d-flex" v-if="currentTab !== 1" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">

						<view class="venus-name"> {{item.venue_name.venue_name}} </view>
						<view class="venus-name" v-if="item.field_type == 2"> 名额场 </view>
						<view class="venus-name" v-if="item.field_type == 1"> 包场 </view>
						<view class="venus-name" v-if="item.field_type == 3"> 拼团 </view>
						<!-- 	<navigator
						:url="`/pages/personal/qrcode/qrcode?id=${item.id}&court_no=${item.court_no}&title=我的场地&choose=选择场地`"
						style="width: 100rpx; height: 100rpx;margin-top: -40rpx;"> -->
						<view style="width: 100rpx; height: 100rpx;margin-top: -40rpx;">
							<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
								<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</view>
						<!-- </navigator> -->
					</view>
				</navigator>
			</view>

		</view>


		<u-empty v-else text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png" />
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				share: {
					title: '自定义分享标题',
					fx_goods_image: '',
				},
				panel: false,
				status: 0,
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
					name: "未使用"
				}, {
					name: "已失效"
				}],
				list: [],
			};
		},
		onLoad(options) {
			console.log(uni.getStorageSync("openid"), '111')
			this.getMyCourt()
			if (options != '') {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				}
			}
		},
		methods: {
			// 获取我的场地详情
			async getMyCourt() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					open_id: uni.getStorageSync("openid"),
					status: 0,
					id: '',
					expired: this.currentTab,
				}
				let res = await index.getMyCourt(params)
				if (res.code === 1) {
					this.list = res.data.result
					console.log(res, '121212')
				}
			},
			onClickTab({
				index

			}) {
				this.currentTab = index;
				console.log(this.currentTab, '1111')
				this.list = []
				this.getMyCourt()
			},
			fx_click(item) {
				console.log(item, '121212')
				this.share.fx_goods_image = item.gdods.goods_image
			},
			// 分享页面
			onShareAppMessage(res) {
				console.log(res, '1111')
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: '绍兴奥体',
					path: '/pages/personal/personal',
					imageUrl: this.share.fx_goods_image //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.venus-name {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.share {
		width: 68rpx;
		height: 68rpx;
		background: rgb(18, 132, 247);
		background: linear-gradient(45deg,
				rgba(18, 132, 247, 1) 0%,
				rgba(7, 177, 253, 1) 77%,
				rgba(87, 202, 251, 1) 100%);
		border-bottom-left-radius: 100rpx;
		position: absolute;
		right: 0;
		top: 0;

		/deep/ .u-icon {
			display: flex;
			justify-content: flex-end;
			margin-right: 7rpx;
		}
	}

	.share_s {
		font-size: 32rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #2f75fa;
	}

	.my-venues {
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			margin: 0 30rpx;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
			line-height: 34rpx;
			color: #333333;
		}

		.item {
			padding: 30rpx;
			background: #ffffff;
			box-shadow: 0px 6rpx 13rpx 1rpx rgba(23, 106, 180, 0.2);
			border-radius: 20rpx;
			position: relative;

			&+.item {
				margin-top: 30rpx;
			}

			.name {
				font-size: 30rpx;
			}

			.venue {
				font-size: 24rpx;
				margin: 19rpx 0;
			}

			.date {
				font-size: 24rpx;
				color: #888888;
			}

			.to {
				background: #f3f3f3;
				border-radius: 50%;
				width: 51rpx;
				height: 51rpx;
			}

			.share_m {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 12%;
				right: -30rpx;
				font-size: 25rpx;

			}
			.share_mc {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 18%;
				right: 160rpx;
				font-size: 25rpx;
			
			}

			.share_a {
				width: 140rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				top: 5%;
				right: 3rpx;

				#shareBtn {
					width: 110rpx;
					height: 60rpx;
					position: absolute;
					border-radius: 50%;
					top: 0;
					left: -2rpx;
					opacity: 0.1;
					font-size: 20rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}
</style>
